<template>
    <div id="ai-pic-item-type-one" @click="goPage" :style="'background-image:url(' + imageUrl + ');width:'+width+';height:'+height+'px;'">
        <div class="top">
            <div class="label">
                <span>LORA</span>
                <span>XL</span>
            </div>
            <div class="tag">
                <p>会员专属</p>
            </div>
        </div>
        <div class="middle" :style="'height:'+(height-100)+'px;'"></div>
        <div class="bottom">
            <div class="title">
                <span class="label">独家</span>
                <span class="desc">【果粒橙】每天都来一瓶</span>
            </div>
            <div class="info">
                <div class="author">
                    <img src="http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960" alt="">
                    <div class="name">壹壹的一天</div>
                </div>
                <div class="check">
                    <div class="look-times">
                        <el-icon><View /></el-icon>
                        <span>34.3k</span>
                    </div>
                    <div class="download-times">
                        <el-icon><Download /></el-icon>
                        <span>3.4k</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import {useRouter} from "vue-router"
import {View,Download} from "@element-plus/icons-vue"
import {defineProps,computed} from "vue"

const props = defineProps(['imageUrl','width','height'])
const imageUrl = computed(()=>{return props.imageUrl})
const width = computed(()=>{return props.width})
const height = computed(()=>{return props.height})

const router = useRouter()

const goPage = ()=>{
    router.push("/lorapicpage")
}
</script>

<style  scoped>
#ai-pic-item-type-one {
    cursor: pointer;
    border-radius: 10px;
    background-size: 100%;
    background-position: 50% 50%;
    transition: all 1s;
}

#ai-pic-item-type-one:hover {
    background-size: 120%;
}


#ai-pic-item-type-one .top .label{
    float: left;
    padding: 5px 10px;
    border-radius: 24px;
    font-size: 14px;
    margin: 20px;
    background-color: rgba(128,128,128,0.5);
    color: white;
    font-weight: bolder;
}

#ai-pic-item-type-one .label span{
    margin: 0 5px;
}

#ai-pic-item-type-one .top .tag{
    margin: 0 20px;
    float: right;
    width: 40px;
    height: 60px;
    background-color: #fff;
    padding: 5px;
    text-align: center;
}

#ai-pic-item-type-one .bottom{
    padding: 15px;
}

#ai-pic-item-type-one .bottom .title{
    display: flex;
    display: -webkit-flex;
    justify-content: flex-start;
    align-items: center;
}

#ai-pic-item-type-one .bottom .title .label{
    background-color: #409EFF;
    padding: 3px;
    color: white;
    border: 1px solid white;
    border-radius: 5px;
}

#ai-pic-item-type-one .bottom .title .desc{
    color: white;
    font-weight: bolder;
    font-size: 18px;
}

#ai-pic-item-type-one .bottom .info{
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    margin-top: 10px;
}

#ai-pic-item-type-one .bottom .info .author {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    color: white;
    font-size: 13px;
}

#ai-pic-item-type-one .bottom .info .author img{
    width: 20px;
    height: 20px;
    border-radius: 20px;
    margin: 0 5px;
}
#ai-pic-item-type-one .bottom .info .check{
    color: white;
    font-size: 13px;
    display: flex;
    display: webkit-flex;
    align-items: center;
}

#ai-pic-item-type-one .bottom .info .check div{
    margin: 0 5px;
}

</style>